<template>
    <el-dialog
        class="dialog"
        :title="title"
        :visible.sync="isShow"
        :close-on-click-modal="false"
        append-to-body
        @close="onDialogClose"
    >
        <el-form
            ref="form"
            class="form-bwrap form-layer-top"
            labelPosition="top"
            :model="formData"
            :rules="rules"
        >
            <el-form-item label="租户名称:" prop="tenant_name">
                <el-input
                    v-model="formData.tenant_name"
                    clearable
                    maxlength="20"
                    placeholder="请输入租户名称"
                ></el-input>
            </el-form-item>
            <el-form-item label="租户类别:" prop="tenant_type">
                <el-select
                    v-model="formData.tenant_type"
                    placeholder="请选择租户类别"
                >
                    <el-option
                        v-for="item in typeData"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码:" prop="certificate_num">
                <el-input
                    v-model="formData.certificate_num"
                    clearable
                    maxlength="20"
                    placeholder="请输入证件号码"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系人:" prop="contact_name">
                <el-input
                    v-model="formData.contact_name"
                    clearable
                    maxlength="20"
                    placeholder="请输入联系人"
                ></el-input>
            </el-form-item>
            <el-form-item label="联系电话:" prop="contact_tel">
                <el-input
                    clearable
                    maxlength="20"
                    placeholder="请输入联系电话"
                    v-model="formData.contact_tel"
                ></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="onDialogClose">取 消</el-button>
            <el-button class="btn-confirm" @click="onSubmit">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinDialogForm } from "@/mixin/dialog/Form";
import { isLettersNumbers, isUumeral } from "@/utils/valid";
@Component({
    name: "RentUserEdit",
    mixins: [mixinDialogForm]
})
export default class RentUserEdit extends Vue {
    @Action("rentUser/add") itemAdd: any;
    @Action("rentUser/edit") itemEdit: any;

    @Getter("sharing/rentUserType") typeData: any;
    init(data: any) {
        const me = this as any;
        me.formData = Object.assign({}, me.formData, data);
    }

    formData: any = {
        tenant_sn: "",
        tenant_name: "",
        tenant_type: "",
        certificate_num: "",
        contact_name: '',
        contact_tel: ""
    };

    // 表单验证
    rules: any = {
        tenant_name: [
            {
                required: true,
                message: "请输入租户名称"
            }
        ],
        tenant_type: [
            {
                required: true,
                message: "请选择租户类别"
            }
        ],
        certificate_num: [
            {
                required: true,
                message: "请输入证件号码"
            },
            {
                validator: isLettersNumbers
            }
        ],
        contact_name: [
            {
                required: true,
                message: "请输入联系人"
            }
        ],
        contact_tel: [
            {
                required: true,
                message: "请输入联系电话"
            },
            {
                validator: isUumeral
            }
        ]
    };
    // 标题
    get title() {
        return (this as any).isEdit ? "修改租户" : "新建租户";
    }
}
</script>